import QtQuick 2.0
import QtQuick.Layouts 1.14
import QtQuick.Shapes 1.14
import QtGraphicalEffects 1.14

Rectangle{
    id:root
    color: Qt.rgba(255,255,255,.2) //Qt.rgba(123,122,122, 0.2)
    Layout.maximumWidth: 80
    Layout.minimumWidth: 80
    Layout.fillHeight: true
    Layout.rightMargin:  10
    Layout.leftMargin: 30
    Layout.topMargin: 30
    Layout.bottomMargin: 30
    radius: 40
    border.width: 1
    border.color: Qt.rgba(207, 207, 207, 0.3)

    property int curTapIndex: 0

    function resetPosition(rec){
        var pos = rec.mapToItem(root, 0, 0)
        return pos.y + firstRec.height / 2 - sliderRec.height/2
    }

    ColumnLayout{
        anchors.fill: parent
        spacing: 0
        anchors.topMargin: 40
        anchors.bottomMargin: 10

        Rectangle{
            id:firstRec
            Layout.fillWidth: true
            height: 80
            color: "transparent"

            Image {
                source: root.curTapIndex === 0 ? "qrc:/img/home.png" : "qrc:/img/home1.png"
                // sourceSize: root.curTapIndex === 0 ? Qt.size(75,75): Qt.size(70,70)
                anchors.centerIn: parent
                anchors.horizontalCenterOffset: 0
                width:40
                height:40

                // Behavior on sourceSize{
                //     PropertyAnimation
                //     {
                //         duration: 270
                //         easing.type: Easing.InOutQuad
                //     }
                // }
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    root.curTapIndex = 0
                    //sliderRec.y = resetPosition(parent)
                }
            }
        }

        Rectangle{
            id:secondRec
            Layout.fillWidth: true
            height: 90
            color: "transparent"

            Image {
                source: root.curTapIndex === 1 ? "qrc:/img/open.png":"qrc:/img/open1.png"
                // sourceSize: root.curTapIndex === 1 ? Qt.size(75,75): Qt.size(70,70)
                anchors.centerIn: parent
                anchors.horizontalCenterOffset: 0
                width:40
                height:40

                // Behavior on sourceSize{
                //     PropertyAnimation
                //     {
                //         duration: 270
                //         easing.type: Easing.InOutQuad
                //     }
                // }
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    root.curTapIndex = 1
                    //sliderRec.y = resetPosition(parent)
                }
            }
        }

        Rectangle{
            Layout.fillWidth: true
            height: 90
            color: "transparent"

            Image {
                source: root.curTapIndex === 2 ? "qrc:/img/setting.png" : "qrc:/img/setting1.png"
                // sourceSize: root.curTapIndex === 2 ? Qt.size(75,75): Qt.size(70,70)
                anchors.centerIn: parent
                anchors.horizontalCenterOffset: 0
                width:40
                height:40

                // Behavior on sourceSize{
                //     PropertyAnimation
                //     {
                //         duration: 270
                //         easing.type: Easing.InOutQuad
                //     }
                // }
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    root.curTapIndex = 2
                    //sliderRec.y = resetPosition(parent)
                }
            }
        }

        // Rectangle{
        //     Layout.fillWidth: true
        //     height: 90
        //     color: "transparent"

        //     Image {
        //         source: root.curTapIndex === 3 ? "qrc:/img/setting1.png":"qrc:/img/setting.png"
        //         sourceSize: root.curTapIndex === 3 ? Qt.size(75,75): Qt.size(70,70)
        //         anchors.centerIn: parent
        //         anchors.horizontalCenterOffset: 6

        //         Behavior on sourceSize{
        //             PropertyAnimation
        //             {
        //                 duration: 270
        //                 easing.type: Easing.InOutQuad
        //             }
        //         }
        //     }

        //     MouseArea{
        //         anchors.fill: parent
        //         onClicked: {
        //             root.curTapIndex = 3
        //             sliderRec.y = resetPosition(parent)
        //         }
        //     }
        // }

        Rectangle{
            Layout.fillWidth: true
            height: 90
            Layout.topMargin: 30
            color: "transparent"

            Image {
                source: "qrc:/img/power.png"
                // sourceSize: Qt.size(70,70)
                anchors.centerIn: parent
                anchors.horizontalCenterOffset: 0
                width:40
                height:40
            }

            MouseArea{
                anchors.fill: parent
                onPressed: {
                    parent.scale += .1
                }

                onReleased: {
                   parent.scale -= .1
                }
            }
        }
    }

    // Rectangle{
    //     id:sliderRec
    //     width: 30
    //     height: 100
    //     color: "transparent"
    //     y:35
    //     x:80
    //     // visible:fasle

    //     Behavior on y{
    //         PropertyAnimation
    //         {
    //             duration: 250
    //             easing.type: Easing.InOutQuad
    //         }
    //     }

    //     Shape{
    //         width: 30//100
    //         height: 100
    //         layer.enabled: true
    //         layer.samples: 16
    //         layer.smooth: true
    //         antialiasing: true
    //         anchors.centerIn: parent

    //         ShapePath{
    //             startX: 0
    //             startY: 0
    //             capStyle: ShapePath.RoundCap
    //             joinStyle: ShapePath.RoundJoin
    //             strokeColor: "transparent"
    //             fillColor: Qt.rgba(255,255,255,.2)
    //             PathCurve { x: 5; y: 18 }
    //             PathCurve { x: 18; y: 50 }
    //             PathCurve { x: 5; y: 82}
    //             PathCurve { x: 0; y: 100 }
    //             PathLine{
    //                 x:0
    //                 y:0
    //             }
    //         }
    //     }
    // }
}
